import {
  Text,
  View,
  StyleSheet,
  SafeAreaView,
  Pressable,
  Image,
  ScrollView,
  Button,
} from "react-native";
import React, { Component, useState } from "react";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

import Icon from "react-native-vector-icons/Ionicons";

type Props = {
  navigation: NativeStackNavigationProp<any, any>;
};

export default function UserDetails({ navigation }: Props) {
  const [userId, setUserId] = useState<string>();

  function goBack() {
    navigation.goBack();
  }

  function goToUserEditor() {
    navigation.navigate("UserEditor");
  }

  return (
    //   <SafeAreaView style={styles.container}>
    <View style={styles.container}>
      <View style={styles.tabber}>
        <Pressable
          onPress={() => {
            goBack();
          }}
        >
          <Icon name="chevron-back-outline" size={24} color="#000"></Icon>
        </Pressable>
        <Pressable
          onPress={() => {
            console.warn(1);
          }}
        >
          <Icon name="ellipsis-horizontal" size={24} color="#000"></Icon>
        </Pressable>
      </View>
      <ScrollView showsVerticalScrollIndicator={false} style={styles.container}>
        <View style={user.container}>
          <View>
            <Image
              style={user.backGB}
              source={require("../../assets/images/userBg.jpg")}
            ></Image>
          </View>
          <View style={user.user}>
            <View style={user.userInfo}>
              <View style={user.avatar}>
                <Image
                  style={user.avatarImg}
                  source={{
                    uri: "https://img1.baidu.com/it/u=1900796238,2660509974&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                  }}
                ></Image>
              </View>
              <View style={user.userList}>
                <View style={user.userListItem}>
                  <Text style={user.userListItemNum}>100</Text>
                  <Text style={user.userListItemMsg}>关注</Text>
                </View>
                <View style={user.userListItem}>
                  <Text style={user.userListItemNum}>312</Text>
                  <Text style={user.userListItemMsg}>粉丝</Text>
                </View>
                <View style={user.userListItem}>
                  <Text style={user.userListItemNum}>5233</Text>
                  <Text style={user.userListItemMsg}>获赞</Text>
                </View>
              </View>
            </View>
          </View>
          <View style={user.personal}>
            <Text style={user.userName}>一只爱吃鱼的猫</Text>
            <Text style={user.userDesc}>目前正在减肥计划中...</Text>
            <Text style={user.userGenderAdderss}>女 | 18 ｜安徽省，合肥市</Text>
          </View>
          <View style={user.userBtn}>
            {/* 别人的主页 */}
            {userId && (
              <>
                <Pressable style={user.userBtnMsg} onPress={() => {}}>
                  <Text style={user.userBtnMsgText}>消息</Text>
                </Pressable>

                <Pressable style={user.userBtnFoucs} onPress={() => {}}>
                  <Text style={user.userBtnFoucsText}>关注</Text>
                </Pressable>
              </>
            )}
            {/* 自己的主页 */}
            {!userId && (
              <>
                <Pressable
                  style={[user.userBtnMsg, { flex: 1 }]}
                  onPress={() => {
                    goToUserEditor()
                  }}
                >
                  <Text style={user.userBtnMsgText}>修改资料</Text>
                </Pressable>
                <Pressable
                  style={[user.userBtnMsg, { flex: 1 }]}
                  onPress={() => {}}
                >
                  <Text style={user.userBtnMsgText}>添加好友</Text>
                </Pressable>
              </>
            )}
          </View>
        </View>
      </ScrollView>
    </View>
    //   </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  tabber: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 10,
    position: "absolute",
    top: 20,
    left: 0,
    right: 0,
    zIndex: 1,
  },
});

const user = StyleSheet.create({
  container: {
    flex: 1,
  },
  backGB: {
    width: "100%",
    height: 160,
  },
  user: {},
  userInfo: {
    flexDirection: "row",
    paddingBottom: 20,
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: "#fff",
    padding: 4,
    marginTop: -20,
    marginLeft: 10,
    marginRight: 10,
  },
  avatarImg: {
    width: "100%",
    height: "100%",
    borderRadius: 40,
  },
  userList: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 10,
  },
  userListItem: {
    alignItems: "center",
  },
  userListItemNum: {
    fontSize: 18,
    paddingBottom: 4,
  },
  userListItemMsg: {
    fontSize: 12,
    color: "#666",
  },
  personal: {
    paddingLeft: 14,
    paddingRight: 14,
  },
  userName: {
    fontSize: 20,
    fontWeight: "bold",
  },
  userDesc: {
    fontSize: 14,
    color: "#666",
    paddingTop: 10,
    paddingBottom: 10,
  },
  userGenderAdderss: {
    fontSize: 14,
    color: "#666",
  },
  userBtn: {
    padding: 14,
    flexDirection: "row",
  },
  userBtnMsg: {
    padding: 10,
    paddingLeft: 40,
    paddingRight: 40,
    borderWidth: 1,
    borderColor: "#0ca678",
    borderRadius: 20,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  userBtnMsgText: {
    color: "#0ca678",
  },
  userBtnFoucs: {
    padding: 10,
    paddingLeft: 40,
    paddingRight: 40,
    borderWidth: 1,
    flex: 1,
    borderColor: "#0ca678",
    backgroundColor: "#0ca678",
    borderRadius: 20,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  userBtnFoucsText: {
    color: "#fff",
  },
});
